<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>风险评估过滤结果</title>
    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" />
    <style>
        body { font-family: Arial, sans-serif; }
        .container { width: 98%; margin: 0 auto; }
        .header-container {
            display: flex;
            justify-content: flex-end; /* 将内容靠右对齐 */
            align-items: center; /* 垂直居中对齐 */
            margin-bottom: 0;
            margin-top: 4px;
        }
        table { width: 100%; border-collapse: collapse; margin-top: 0; }
        table, th, td { border: 1px solid #ddd; }
        th, td { padding: 10px; text-align: left; }
        th { background-color: #f2f2f2; }
        .spacer { height: 16px; } /* 添加空行的高度 */
    </style>
</head>
<body>
    <div class="container">
        <!-- 添加过滤表单 -->
         <div class="header-container">
            <form class="layui-form" id="filterForm">

{#                <div class="layui-form-item">#}
                    <div class="layui-input-inline">
                        <label class="layui-form-label">仅显示空白</label>
                         <input type="checkbox" name="isFiltered" lay-skin="switch" lay-text="是|否" lay-filter="filterSubmit">

                    </div>
{#                        <select name="filter_option" lay-verify="required" lay-search>#}
{#                            <option value="all">全部显示</option>#}
{#                            <option value="empty">仅显示未完成</option>#}
{#                        </select>#}

{#                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="filterSubmit">#}
{#                        <i class="layui-icon layui-icon-search"></i>过滤</button>#}
{#                    <button class="layui-btn layui-btn-primary" id="clearFilter">取消</button>#}
{#                </div>#}
            </form>
         </div>
        <div class="layui-form" id="table-list">
            <table class="layui-hide" id="riskAssessmentTable" lay-filter="riskAssessmentTable"></table>
        </div>
        <div class="spacer"></div> <!-- 添加空行 -->
        <div class="layui-form" id="table-list">
            <table class="layui-hide" id="cybersecurityReqTable" lay-filter="cybersecurityReqTable"></table>
        </div>
    </div>

    <script src="/static/js/jquery-3.6.0.min.js"></script>
    <script src="/static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script>
        layui.use(['table', 'form', 'layer'], function () {
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var selectedRowId = null; // 用于存储当前选中的行的 id

            // 计算表格的高度
            var windowHeight = window.innerHeight;
            var tableHeight = (windowHeight - 80)/2; // 减去其他元素的高度和一些边距

            // 渲染第一个表格
            var riskAssessmentTableIns = table.render({
                elem: '#riskAssessmentTable',
                url: '/getFilteredRiskAssessmentEcu',
                height: tableHeight+60,
                page: true,
                limit: 50,
                limits: [50, 100, 500],
                cols: [[
                    {field: 'id', title: 'ID', width: 60, align: 'center', hide: true},
                    {type: 'radio', width: 60, align: 'center'},
                    {type: 'numbers', title: '序号', width: 60, align: 'center'}, // 添加'序号'列
                    {field: 'item', title: 'Item', width: 180, align: 'center'},
                    {field: 'risk_code', title: '风险编码', width: 210, align: 'center'},
                    {field: 'risk_level', title: '等级', width: 80, align: 'center'},
                    {field: 'cybersecurity_goal_name', title: '安全目标名称', width: 320, align: 'left'},
                    {field: 'cybersecurity_req_or', title: '网络安全需求', width: 280, align: 'center'},
                    {field: 'r_risk_est_r_level', title: '残余攻击可行性等级', width: 120, align: 'center'},
                    {field: 'r_risk_treatment_strategy', title: '残余风险等级', width: 120, align: 'center'},
                    {field: 'r_risk_est_explanation', title: '残余风险处置描述', width: 160, align: 'center'}
                ]],
                done: function (res, curr, count) {
                    console.log('第一个表格渲染完成');
                    // 重新选中之前选中的行
                    if (selectedRowId) {
                        var rowIndex = res.data.findIndex(function (item) {
                            return item.id === selectedRowId;
                        });
                        if (rowIndex !== -1) {
                            var rowElem = $('#riskAssessmentTable').find('tr[data-index="' + rowIndex + '"]');
                            rowElem.find('input[type="radio"]').prop('checked', true);
                            form.render('radio'); // 重新渲染单选框
                        }
                    }
                }
            });

            // 渲染第二个表格
            table.render({
                elem: '#cybersecurityReqTable',
                url: '/getFilteredCybersecurityReq',
                height: tableHeight-70,
                cols: [[
                    {field: 'id', title: 'ID', width: 60, align: 'center', hide: true},
                    {type: 'numbers', title: '序号', width: 60, align: 'center'}, // 添加'序号'列
                    {field: 'type', title: '类型', width: 150, align: 'center'},
                    {field: 'name_or', title: '安全需求名称', width: 210, align: 'left'},
                    {field: 'desc_or', title: '安全需求描述', width: 620, align: 'left'},
                    {field: 'state', title: '状态', width: 80, align: 'center'}
                ]],
                done: function (res, curr, count) {
                    console.log('第二个表格渲染完成');
                }
            });

            // 监听过滤表单提交事件
            form.on('submit(filterSubmit)', function (data) {
                // 获取过滤条件
                var filterData = data.field;
                console.log('过滤条件:', filterData);

                // 重新渲染第一个表格，传递过滤参数
                riskAssessmentTableIns.reload({
                    where: filterData,
                    page: {
                        curr: 1 // 重新从第 1 页开始
                    }
                });

                return false; // 阻止表单默认提交行为
            });

            // 监听过滤表单提交事件
            form.on('switch(filterSubmit)', function (data) {
                // 获取过滤条件
                var filterData = data.elem.checked ? { isFiltered: true } : { isFiltered: false };
                console.log('过滤条件:', filterData);
                // 重新渲染第一个表格，传递过滤参数
                riskAssessmentTableIns.reload({
                    where: filterData
                });
            });
            // 监听取消过滤按钮点击事件
            $('#clearFilter').on('click', function () {
                // 清除过滤条件
                $('#filterForm select[name="filter_option"]').val('all');
                form.render('select'); // 重新渲染下拉框

                // 重新渲染第一个表格，显示所有数据
                riskAssessmentTableIns.reload({
                    where: { filter_option: 'all' },
                    page: {
                        curr: 1 // 重新从第 1 页开始
                    }
                });
            });

            // 监听第一个表格的单选框选择事件
            table.on('radio(riskAssessmentTable)', function (obj) {
                var selectedData = obj.data;
                var selectedId = selectedData.id;
                selectedRowId = selectedData.id; // 存储当前选中的行的 id

                // 刷新第二个表格
                table.reload('cybersecurityReqTable', {
                    url: '/getFilteredCybersecurityReq',
                    where: {
                        id: selectedId
                    }
                });
            });

            // 监听第二个表格的行双击事件
            table.on('rowDouble(cybersecurityReqTable)', function (obj) {
                var selectedData = obj.data;
                var reqId = selectedData.id;

                console.log('鼠标双击 id=', reqId);

                // 向后端发送请求，传递双击行的 id
                $.ajax({
                    url: '/setCybersecurityReq',
                    type: 'POST',
                    data: {
                        req_id: reqId
                    },
                    success: function (response) {
                        if (response.code === 0) {
                            layer.msg('设置成功');
                            // reload 第一个表格 riskAssessmentTable
                            table.reload('riskAssessmentTable', {
                                url: '/getFilteredRiskAssessmentEcu'
                            });
                        } else {
                            layer.msg('设置失败');
                        }
                    },
                    error: function () {
                        layer.msg('请求失败');
                    }
                });
            });
        });
    </script>
</body>
</html>